<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>缺勤</title>
    <!-- Fav  Icon Link -->
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <!-- themify icons CSS -->
    <link rel="stylesheet" th:href="@{/css/themify-icons.css}">
    <!-- Animations CSS -->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <!-- Main CSS -->
    <link rel="stylesheet" th:href="@{/css/styles.css}">
    <link rel="stylesheet" th:href="@{/css/green.css}" id="style_theme">
    <link rel="stylesheet" th:href="@{/css/responsive.css}">
    <!-- morris charts -->
    <link rel="stylesheet" th:href="@{/charts/css/morris.css}">
    <!-- jvectormap -->
    <link rel="stylesheet" th:href="@{/css/jquery-jvectormap.css}">
    <link rel="stylesheet" th:href="@{/datatable/dataTables.bootstrap4.min.css}">
    <link rel="stylesheet" th:href="@{/css/layui.css}" media="all">
    <script th:src="@{/js/modernizr.min.js}"></script>
</head>
<body>
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>

<form class="layui-form" action="/attendance/cause" method="post">

    <div class="layui-form-item" >
        <label class="layui-form-label" style="width: 7%"><font color="red">*</font>楼房号</label>
        <div class="layui-input-block" style="margin-right: 80%">
            <select  lay-filter="house" lay-verify="required"  lay-search=""  name="startArea1" id="start_select1">
                <option value="" selected=""></option>
                <option  th:each="hou:${hous}" th:text="${hou.hou_id}" th:value="${hou.hou_id}"></option>
            </select>
            <!--<select lay-filter="aihao"  name="startArea2" id="start_select2">
                <option value="" selected=""></option>
            </select>-->
            <div class="layui-unselect layui-form-select">
                <div class="layui-select-title">
                    <input type="text" placeholder="请选择"  id="hou" class="layui-input layui-unselect" >
                    <i class="layui-edge"></i>
                </div>
                <dl class="layui-anim layui-anim-upbit">
                    <dd lay-value="" class="layui-select-tips">请选择</dd>
                    <dd th:each="hou:${hous}" th:text="${hou.hou_id}" th:value="${hou.hou_id}" class="layui-this"></dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label"  lay-search="" style="width: 7%"><font color="red">*</font>寝室号</label>
        <div class="layui-input-block" style="margin-right: 80%">
            <select lay-filter="dor" lay-search = "" lay-verify="required" name="startArea2" id="start_select2">
                <option value="" selected=""></option>
            </select>
            <div class="layui-unselect layui-form-select">
                <div class="layui-select-title">
                    <input type="text" placeholder="请选择" class="layui-input layui-unselect" >
                    <i class="layui-edge"></i>
                </div>
                <dl class="layui-anim layui-anim-upbit">
                    <dd lay-value="" class="layui-select-tips">请选择</dd>
                    <!--<dd th:each="hou:${hous}" th:text="${hou.hou_id}" th:value="${hou.hou_id}" class="layui-this"></dd>-->

                </dl>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text" style="margin-right: 2%">
        <label class="layui-form-label" style="width: 7%"><font color="red">*</font>缺勤原因</label>
        <div class="layui-input-block">
            <textarea maxlength="30" lay-verify="required" placeholder="请输入内容" class="layui-textarea" name="text"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit1">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <input type="hidden" id="msg" th:value="${message}" >
</form>

<!-- /Back to Top -->
<!-- Jquery Library-->
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<!-- Popper Library-->
<script th:src="@{/js/popper.min.js}"></script>
<!-- Bootstrap Library-->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- Datatable  -->
<script th:src="@{/datatable/jquery.dataTables.min.js}"></script>
<script th:src="@{/datatable/dataTables.bootstrap4.min.js}"></script>
<!-- Custom Script-->
<script th:src="@{/js/custom.js}"></script>
<script th:src="@{/js/custom-datatables.js}"></script>
<script th:src="@{/js/layui.js}" charset="utf-8"></script>

<script>
    layui.use(['form', 'layedit', 'laydate'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });


        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , content: function (value) {
                layedit.sync(editIndex);
            }

        });

    });



    /*$('#start_select1[name = start_select1]').change(function () {
        /!* var t =document.getElementsByName("startArea1").val();*!/
        var hou = $('#start_select1[name = start_select1]').val();
        console.log("t@@@@@@@@"+hou);
        if (t == '') {
            return;
        }
        $.ajax({
            url: '/attendance/dor',
            async: false,
            type: 'post',
            data: {hou: hou},
            success: function (data) {
                var t2 = $("#start_select2").empty();
                for (var i = 0; i < data.length; i++) {
                    t2.append("<option value='" + data[i] + "'>" + data[i] + "</option>");
                }
            }
        })
    });
*/
    layui.use(['jquery','form'],function () {
        var form = layui.form;
        var  $ = layui.jquery;
        form.on('select(house)', function(data){
            //清空第二个下拉框
            $('#start_select2').empty()
            $('#start_select2').append("<option value=\"\" selected=\"\"></option>");
            //console.log(data.elem); //得到select原始DOM对象
            console.log("value:"+data.value); //得到被选中的值
            var hou = data.value;
            //console.log(data.othis); //得到美化后的DOM对象
            $.ajax({
                url: '/attendance/dor',
                async: false,
                type: 'POST',
                data: {hou: hou},
                success: function (data) {
                    console.log(data);
                    /*var t2 = $("#start_select2").empty();*/
                    for (var i = 0; i < data.length; i++) {
                        /*t2.append("<option value='" + data[i] + "'>" + data[i] + "</option>");*/
                        console.log(data[i]);
                        $('#start_select2').append(new Option(data[i],data[i]));
                    }

                }
            });
            form.render('select');
        });

    });
    onload=function(){
        var msg =  $("#msg").val();
        if (msg){
            alert(msg);
        }

    };

</script>



</body>
</html>